<template>
  <div id="login" @click='loginBlock = false'>
    <div class="login">
      <div class="importExportNav">
        <div class="importExportLogin">
          <div class="importExportLogo">
            <img class="img1"  src="../../assets/importExportImg/logo_202_58.png" alt />
          </div>
          <div class="importExportList">
            <div v-for="(item, index) of navList" :key="index" @click="navFun(index)">
              <router-link class="importExportItem" :class="{isActiveNav: activeNav === index}" :to="{name: item.link}">{{$t(item.name)}}</router-link>
            </div>
            <div class="loginBtn" @click.stop="loginBlock = true">
              <span class="importExportItem">{{$t('lang.login.loginButton')}}</span>
              <div v-if="loginBlock" class="loginBlock">
                <i class="el-icon-caret-top loginBlockTopIcon"></i>
                <el-form
                  :model="loginForm"
                  :rules="loginRules"
                  ref="loginForm"
                  label-position="left"
                  label-width="0px"
                  class="demo-ruleForm login-container"
                >
                  <h3 class="title" style="margin: 36px 0 20px 0;">{{$t('lang.login.loginTitle')}}</h3>
                  <lang-select class="set-language" />
                  <el-form-item prop="username" style="margin-bottom:15px">

                    <div class="login-input-box">
                      <span class="icon iuser"></span>
                      <el-input name="username" placeholder="请输入用户名" v-model="loginForm.username"></el-input>
                    </div>
                  </el-form-item>
                  <el-form-item prop="password" class="passwordTS">

                    <div class="login-input-box">
                      <span class="icon ipassword"></span>
                      <el-input placeholder="请输入密码" type="password" style="display: none;" show-password></el-input>
                      <el-input placeholder="请输入密码" type="password" v-model="loginForm.password" show-password></el-input>
                    </div>
                  </el-form-item>
                  <el-checkbox v-model="checked" class="remember" style="margin-bottom: 15px;margin-top: 6px;">{{$t('lang.login.loginRemember')}}</el-checkbox>
                  <el-form-item style="width:100%;">
                    <el-button
                      type="primary"
                      style="width: 100%;background-color: #6296ea;border:1px solid #6296ea;"
                      v-on:keyup.13.native="submit"
                      @click.native.prevent="handleLogin"
                      :loading="logining"
                    >{{$t('lang.login.loginButton')}}</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="contentBg">
        <div style="width: 1200px;margin: 0 auto;margin-bottom: 40px;">
          <router-view></router-view>
        </div>
      </div>
      <div class="scecialInfo">
        <div style="width: 1200px;margin: 0 auto;">
          <h3>{{$t('lang.home.projectTitle')}}</h3>
          <div class="scecialInfoImgList">
            <div class="scecialInfoImgItem">
              <img src="../../assets/importExportImg/special_1_364_180.jpg" alt="" @click="openUrl('https://baidu.com')">
              <span>两学一做</span>
            </div>
            <div class="scecialInfoImgItem">
              <img src="../../assets/importExportImg/special_2_364_180.jpg" alt="">
              <span>质量效益4.0精细化管理</span>
            </div>
            <div class="scecialInfoImgItem">
              <img src="../../assets/importExportImg/special_3_364_180.jpg" alt="">
              <span>监督曝光</span>
            </div>
          </div>
        </div>
      </div>
      <div class="importExportFooter">
        <div style="width: 1200px;margin: 0 auto;">
          <div class="footerList">
            <div class="footerItem">
              <p>建议使用谷歌浏览器浏览本系统，获得更好用户体验</p>
              <p>地址：北京市东城区东直门外小街6号海油大厦</p>
              <p>邮编：100027</p>
            </div>
            <div class="footerItem rightQrcode">
              <div style="text-align: right;margin-right: 20px;">
                <p>请使用手机扫描二维码</p>
                <p>下载海油移动APP</p>
              </div>
              <img src="../../assets/importExportImg/QRcode_146.jpg" alt="">
            </div>
          </div>
          <p class="copy">中海石油化工进出口有限公司 版权所有&copy;2017.ALL right are reserved</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { isvalidUsername } from '@/utils/validate'
  import LangSelect from '@/components/LangSelect'
  import SocialSign from './socialsignin'
  import Cookies from 'js-cookie'
  // 引入base64
  const Base64 = require('js-base64').Base64
  export default {
    components: { LangSelect, SocialSign },
    name: 'login',
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!isvalidUsername(value)) {
          callback(new Error('请输入正确的用户名'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码不能小于5位'))
        } else {
          callback()
        }
      }
      return {
        loginBlock: false,
        activeNav: 0,
        navList: [
          {
            name: 'lang.login.home',
            link: 'homePage'
          },
          {
            name: 'lang.login.loginCompany',
            link: 'companyIntroduction'
          },
          {
            name: 'lang.login.loginManagement',
            link: 'xxx'
          },
          {
            name: 'lang.login.loginOrganization',
            link: 'xxx'
          },
          {
            name: 'lang.login.loginBusiness',
            link: 'xxx'
          },
          {
            name: 'lang.login.loginPhone',
            link: 'xxx'
          }
        ],
        input: '',
        logining: false,
        checked: false,
        loginForm: {
          username: '',
          password: '',
          auth_type: ''
        },
        loginRules: {
          username: [{ required: true, trigger: 'blur', validator: validateUsername }],
          password: [{ required: true, trigger: 'blur', validator: validatePassword }]
        },
        passwordType: 'password',
        loading: false,
        showDialog: false
      }
    },
    watch: {

    },
    mounted() {
    },
    methods: {
      loginFun() {
        this.loginBlock = !this.loginBlock
      },
      navFun(index) {
        this.activeNav = index
      },
      submit() {
        this.handleLogin()
      },
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
              this.loading = false
              this.setUserInfo()
              this.$router.push({ path: '/' })
            }).catch(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      setUserInfo() {
        if (this.checked) {
          Cookies.set('username', this.loginForm.username)
          // base64加密密码
          let passWord = Base64.encode(this.loginForm.password)
          Cookies.set('password', passWord)
          Cookies.set('remember', this.checked)
        } else {
          Cookies.set('remember', this.checked)
          Cookies.set('username', '')
          Cookies.set('password', '')
        }
      },
      afterQRScan() {
        // const hash = window.location.hash.slice(1)
        // const hashObj = getQueryObject(hash)
        // const originUrl = window.location.origin
        // history.replaceState({}, '', originUrl)
        // const codeMap = {
        //   wechat: 'code',
        //   tencent: 'code'
        // }
        // const codeName = hashObj[codeMap[this.auth_type]]
        // if (!codeName) {
        //   alert('第三方登录失败')
        // } else {
        //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
        //     this.$router.push({ path: '/' })
        //   })
        // }
      },
      getCookieInfo() {
        // 在页面加载时从cookie获取登录信息
        let username = Cookies.get('username')
        let password = ''
        let cookiesPassword = Cookies.get('password')
        if (cookiesPassword) {
          password = Base64.decode(cookiesPassword)
        }
        // 如果存在赋值给表单，并且将记住密码勾选
        if (Cookies.get('remember') === 'true') {
          this.loginForm.username = username
          this.loginForm.password = password
          this.checked = true
        }
      },
      openUrl(url){
        window.open(url)
      }
    },
    created() {
      var _this = this
      document.onkeydown = function(e) {
        let key = window.event.keyCode
        if (key == 13) {
          _this.submit()
        }
      }
      this.getCookieInfo()
      // window.addEventListener('hashchange', this.afterQRScan)
    },
    destroyed() {
      // window.removeEventListener('hashchange', this.afterQRScan)
    },
  }
</script>

<style scoped>
  .contentBg{
    background: #bde0ff url("../../assets/importExportImg/portalbg_1920_444.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 100%;
  }
  #login {
    width: 100%;
    height: 100%;
  }
  .importExportNav{
    width: 100%;
    height: 85px;
    background-color: #115a9e;
  }
  .loginBtn{
    position: relative;
  }
  .importExportLogo, .importExportList{
    display: inline-block;
  }
  .importExportLogo{
    margin-top: 14px;
  }
  .importExportList{
    display: flex;
    align-items: flex-end;
  }
  .importExportLogin{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .importExportItem{
    font-size: 14px;
    color: #ffffff;
    display: inline-block;
    margin: 0 22px;
    padding: 22px 0;
    border-bottom: 4px solid transparent;
    cursor: pointer;
  }
  .importExportItem:hover{
    border-bottom: 4px solid #ffffff;
  }
  .isActiveNav{
    border-bottom: 4px solid #ffffff!important;
  }
  .loginBlock{
    position: absolute;
    width: 400px;
    box-sizing: border-box;
    padding: 0 40px;
    background-color: #ffffff;
    left: 0;
    top: 70px;
    border-radius: 4px;
    margin-left: -260px;
    z-index: 999;
  }
  .loginBlockTopIcon{
    position: absolute;
    right: 97px;
    color: #fff;
    top: -11px;
    font-size: 16px;
  }
  .login-input-box .icon{
    width: 28px;
    height: 28px;
    margin: 3px 4px 6px 10px;
    /* background-color: #ff7d0a; */
    display: inline-block;
    position: absolute;
    /* border-right: 1px solid #dcdcdc; */
  }

  .login-input-box .iuser{
    background: url("../../assets/importExportImg/loginicon_18_username.png") no-repeat;
    width: 30px;
    height: 35px;
    background-position: 9px 11px;
    background-size: 55%;
    margin: 0;
    margin-left: 6px;
    z-index: 999;
  }

  .login-input-box .ipassword{
    background: url("../../assets/importExportImg/loginicon_18_pw.png") no-repeat;
    width: 30px;
    height: 35px;
    background-position: 7px 12px;
    background-size: 60%;
    margin: 0;
    margin-left: 6px;
    z-index: 999;
  }
  .login-input-box >>> .el-input input{
    padding-left: 42px;
    border: 1px solid #dfdfdf !important;
  }
  .passwordTS >>> .el-form-item__error{
    padding-top: 11px;
  }
  .scecialInfo{
    width: 100%;
    background-color: #ffffff;
    height: 386px;
  }
  .scecialInfo h3{
    padding: 40px 0;
    font-size: 20px;
    font-weight: normal;
  }
  .scecialInfoImgList{
    display: flex;
    justify-content: space-between;
  }
  .scecialInfoImgItem{
    text-align: center;
  }
  .scecialInfoImgItem img{
    width: 365px;
    height: 180px;
  }
  .scecialInfoImgItem span{
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
  }
  .scecialInfoImgItem:first-child{
    margin-left: 0;
  }
  .importExportFooter{
    width: 100%;
    background-color: #404040;
  }
  .footerList{
    display: flex;
    justify-content: space-between;
  }
  .footerItem{
    margin-top: 20px;
  }
  .footerItem p{
    color: #aaaaaa;
    line-height: 40px;
  }
  .rightQrcode{
    display: flex;
    margin-top: 40px;
  }
  .rightQrcode p{
    line-height: initial;
    padding-top: 10px;
  }
  .rightQrcode p:first-child{
    margin-top: 0;
  }
  .copy{
    margin-top: 40px;
    color: #aaaaaa;
    line-height: 58px;
    border-top:1px solid #535353;
    text-align: center;
  }
  .set-language {
    position: absolute;
    top: 31px;
    font-size: 18px;
    right: 36px;
    cursor: pointer;
  }
</style>
